<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style/editor.css" rel="stylesheet" type="text/css">
<link href="../style/istoolbar.css" rel="stylesheet" type="text/css">

<script language="javascript" src="../istoolbar.js"></script>
<script>
  var sLangDir=parent.oUtil.langDir;
  document.write("<scr"+"ipt src='../language/"+sLangDir+"/source_html.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>

var iconOffsetTop = -75;

function init()
  {
  var idSource = document.getElementById("idSource").contentWindow;
  var doc = idSource.document;
  doc.open();
  doc.write("<html><head><head><body></body></html>");
  doc.close();
  }

function doCmd(sCmd,sOption)
    {
    var idSource = document.getElementById("idSource").contentWindow;
    idSource.document.execCommand(sCmd, false, sOption);
    }

function jsReplace(sText, sFind, sReplace)
    {
    var arrTmp = sText.split(sFind);
    if (arrTmp.length > 1) sText = arrTmp.join(sReplace);
    return sText;
    }

var sBodyHeader;
var sBodyFooter;
var sBodyTag;

function bodyOnLoad()
    {
    setupToolbar();loadTxt();init();

    var oEditor=parent.oUtil.oEditor;
    var obj = parent.oUtil.obj;

    var sHTML="";
    sHTML=parent.getOuterHTML(oEditor.document.documentElement);
    sHTML=jsReplace(sHTML," designMode=on","");
    sHTML = sHTML.replace(/>\s+</gi, "><"); //replace space between tag
    sHTML = sHTML.replace(/\r/gi, ""); //replace space between tag
    sHTML = sHTML.replace(/(<br>)\s+/gi, "$1"); //replace space between BR and text
    sHTML = sHTML.replace(/<br class="innova">/gi, "");

    var sMatch=sHTML.match(/<link[^>]*>/ig);
    if(sMatch) {
      for(var i=0; i < sMatch.length; i++) {
        if(sMatch[i].indexOf("tmp_xxinnova")!=-1) {
          sHTML = sHTML.replace(new RegExp(sMatch[i], "gi"), "");
        }
      }
    }

    if(obj.docType!="") sHTML=obj.docType+"\n"+sHTML;//restore doctype (if any)

    var idSource = document.getElementById("idSource").contentWindow;
    var sourceDocBody = idSource.document.body;

    //remove all child
    sourceDocBody.innerHTML = "";
    sourceDocBody.appendChild(document.createTextNode(sHTML));

    sourceDocBody.style.cssText="overflow-x:scroll;overflow-y:scroll;white-space:nowrap";
    sourceDocBody.clearAttributes;
    sourceDocBody.style.marginTop='4px';
    sourceDocBody.style.marginLeft='10px';
    sourceDocBody.style.fontFamily='Tahoma';
    sourceDocBody.style.fontSize='11px';
    sourceDocBody.style.color='black';
    sourceDocBody.style.background='white';
    //idSource.document.addEventListener("keydown", new Function("doKeyPress(arguments[0])"), false);

    doWrap()

    idSource.document.designMode="on";
    idSource.focus();
    }

function doKeyPress(evt)
    {
    /*
    if (evt.keyCode==13)
        {
        var thisSel = document.selection.createRange();
        thisSel.pasteHTML('<br>');
        evt.cancelBubble = true;
        evt.returnValue = false;
        thisSel.select();
        thisSel.moveEnd("character", 1);
        thisSel.moveStart("character", 1);
        thisSel.collapse(false);
        return false;
        idSource.focus();
        }
    if (evt.ctrlKey)
        {
        if(evt.keyCode==65)doCmd("SelectAll");
        }*/
    }

function doUpdate()
    {
    parent.oUtil.obj.saveForUndo();

    var idSource = document.getElementById("idSource").contentWindow;
    var range = idSource.document.body.ownerDocument.createRange();
    range.selectNodeContents(idSource.document.body);

    var obj = parent.oUtil.obj;
    obj.putHTML(range.toString());//tdk menggunakan loadHTML() krn loadHTML() hanya utk first load.
    }

function doWrap()
    {
    var inpWrap = document.getElementById("inpWrap");

    if(inpWrap.checked==true)
        {
        //Wrap Text
        idSource.document.body.style.whiteSpace="normal";
        }
    else
        {
        idSource.document.body.style.whiteSpace="nowrap";
        }
    }

//*******************
function setupToolbar()
  {
  var obj = parent.oUtil.obj;
  var tb=new ISToolbar("srcEdt");
  tb.onClick=function(id) {tbAction(tb, id);};
  tb.iconPath="../"+obj.iconPath;
  tb.btnWidth=obj.iconWidth;
  tb.btnHeight=obj.iconHeight;

  //tb.addButton("btnCut","btnCut.gif",getTxt("Cut"));
  //tb.addButton("btnCopy","btnCopy.gif",getTxt("Copy"));
  //tb.addButton("btnPaste","btnPaste.gif",getTxt("Paste"));
  //tb.addSeparator();
  tb.addButton("btnUndo","btnUndo.gif",getTxt("Undo"));
  tb.addButton("btnRedo","btnRedo.gif",getTxt("Redo"));
  tb.addSeparator();
  tb.addButton("btnSearch","btnSearch.gif",getTxt("Search"));
  document.getElementById("idToolbar").innerHTML=tb.render();
  }

function tbAction(tb, id)
  {
  switch(id)
    {
    case "btnCut": doCmd('Cut'); break;
    case "btnCopy": doCmd('Copy'); break;
    case "btnPaste": doCmd('Paste'); break;
    case "btnUndo": doCmd('Undo'); break;
    case "btnRedo": doCmd('Redo'); break;
    case "btnSearch": modelessDialogShow('search2.htm',375,163); break;
    }

  }
//*******************

function modelessDialogShow(url,width,height)
    {
    parent.modelessDialogShow(parent.oUtil.scriptPath+url, width,height,window);
    }

</script>
</head>
<body style="overflow:hidden;margin:0;background: #f4f4f4;">

<table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="idToolbar">

</td>
</tr>
<td style="height:100%">
    <iframe style="width:100%;height:100%;" frameborder="no" name="idSource" id="idSource" contentEditable="true"></iframe>
</td>
</tr>
<tr>
<td class="dialogFooter" style="padding-top:10px;" align="right" valign="right">
    <table cellpadding=0 cellspacing=0>
    <td width=100%>
        &nbsp;<input type="checkbox" ID="inpWrap" NAME="inpWrap" class="inpChk" onclick="doWrap()" checked> <span id="txtLang" name="txtLang">Wrap Text</span>
    </td>
    <td>
        <input type="button" id="btnCancel" name="btnCancel" value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    </td>
    <td>
        <input type="button" id="btnApply" name="btnApply" value="apply" onclick="doUpdate();bodyOnLoad()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    </td>
    <td>
        <input type="button" id="btnOk" name="btnOk" value="ok" onclick="doUpdate();self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    </td>
    </table>
</td>
</tr>
</table>

</body>
</html>